<template>
  <view class="route-container">
    <view class="map-wrapper" id="routeMap"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      route: null,
      map: null,
      ak: 'H4YdFbkDBIbCvaNBsbrFRSlvxEjCHCvC' // 你的AK
    };
  },
  onLoad(options) {
    this.route = JSON.parse(decodeURIComponent(options.route));
    this.loadMapSDK();
  },
  methods: {
    loadMapSDK() {
      if (window.BMap) {
        this.initMap();
        return;
      }
      const script = document.createElement('script');
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=${this.ak}&callback=initRouteMap`;
      window.initRouteMap = () => this.initMap();
      document.head.appendChild(script);
    },
    initMap() {
      this.map = new BMap.Map("routeMap");
      // 解析路线中的点坐标
      const points = this.route.points.map(p => new BMap.Point(p.lng, p.lat));
      // 绘制路线
      const polyline = new BMap.Polyline(points, {
        strokeColor: "#007aff",
        strokeWeight: 6,
        strokeOpacity: 0.8
      });
      this.map.addOverlay(polyline);
      // 添加起点和终点标记
      this.map.addOverlay(new BMap.Marker(points[0], { title: '起点' }));
      this.map.addOverlay(new BMap.Marker(points[points.length - 1], { title: '终点' }));
      // 调整地图视野
      this.map.setViewport(points);
    }
  }
};
</script>

<style>
.route-container {
  width: 100%;
  height: 100vh;
}
.map-wrapper {
  width: 100%;
  height: 100%;
}
</style>